<html>
	<head>
		<title>html5-RockPaperScissors</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<style>body {
    margin: 0;
    padding: 0;
    font: 14px/1.5 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
    color: #252519;
}
a {
    color: #252519;
}
a:hover {
    text-decoration: underline;
    color: #19469D;
}
p {
    margin: 12px 0;
}
h1, h2, h3 {
    margin: 0;
    padding: 0;
}
table#source {
    width: 100%;
    border-collapse: collapse;
}
table#source td:first-child {
    padding: 30px 40px 30px 40px;
    vertical-align: top;
}
table#source td:first-child,
table#source td:first-child pre {
    width: 450px;
}
table#source td:last-child {
    padding: 30px 0 30px 40px;
    border-left: 1px solid #E5E5EE;
    background: #F5F5FF;
}
table#source tr {
    border-bottom: 1px solid #E5E5EE;
}
table#source tr.filename {
    padding-top: 40px;
    border-top: 1px solid #E5E5EE;
}
table#source tr.filename td:first-child {
    text-transform: capitalize;
}
table#source tr.filename td:last-child {
    font-size: 12px;
}
table#source tr.filename h2 {
    margin: 0;
    padding: 0;
    cursor: pointer;
}
table#source tr.code h1,
table#source tr.code h2,
table#source tr.code h3 {
    margin-top: 30px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
    font-size: 18px;
}
table#source tr.code h2 {
    font-size: 16px;
}
table#source tr.code h3 {
    font-size: 14px;
}
table#source tr.code ul {
    margin: 15px 0 15px 35px;
    padding: 0;
}
table#source tr.code ul li {
    margin: 0;
    padding: 1px 0;
}
table#source tr.code ul li p {
    margin: 0;
    padding: 0;
}
table#source tr.code td:first-child pre {
    padding: 20px;
}
#ribbon {
    position: fixed;
    top: 0;
    right: 0;
}
code .string { color: #219161; }
code .regexp { color: #219161; }
code .keyword { color: #954121; }
code .number { color: #19469D; }
code .comment { color: #bbb; }
code .this { color: #19469D; }</style>
		<script>
			$(function(){
				$('tr.code').hide();
				$('tr.filename').toggle(function(){
					$(this).nextUntil('.filename').fadeIn();
				}, function(){
					$(this).nextUntil('.filename').fadeOut();
				});
			});
		</script>
	</head>
	<body>
<table id="source"><tbody><tr><td><h1>html5-RockPaperScissors</h1><p>RockPaperScissors on WebSocket</p></td><td></td></tr><tr class="filename"><td><h2 id="web/main.js"><a href="#">main</a></h2></td><td>web/main.js</td></tr><tr class="code">
<td class="docs">
<p>Iframe Main handle the behavior of the iframe</p>
</td>
<td class="code">

</td>
</tr>
<tr class="code">
<td class="docs">
<p>ctor/dtor</p>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="class">IframeMain</span>	= <span class="keyword">function</span>(){
	<span class="this">this</span>.<span class="variable">connectedRsc</span>	= <span class="keyword">null</span>;
	<span class="comment">// init this object</span>
	<span class="this">this</span>.<span class="variable">log</span>		= <span class="class">IframeMain</span>.<span class="variable">log</span>;
	<span class="comment">// create the parentWindow and wait for message</span>
	<span class="this">this</span>.<span class="variable">parentWindowMessageCtor</span>()
}
<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">destroy</span>	= <span class="keyword">function</span>(){
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Log function for the class</p>
</td>
<td class="code">
<pre><code><span class="class">IframeMain</span>.<span class="variable">log</span>	= <span class="keyword">function</span>(){}
<span class="comment">//IframeMain.log	= function(){ console.log.apply(console, arguments) }</span>


<span class="comment">//////////////////////////////////////////////////////////////////////////////////</span>
<span class="comment">//										//</span>
<span class="comment">//////////////////////////////////////////////////////////////////////////////////</span>

<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelCtor</span>	= <span class="keyword">function</span>(<span class="variable">token</span>, <span class="variable">resource</span>, <span class="variable">clientId</span>){
	<span class="keyword">var</span> <span class="variable">self</span>	= <span class="this">this</span>;
	<span class="keyword">var</span> <span class="variable">channel</span>	= <span class="keyword">new</span> <span class="variable">goog</span>.<span class="variable">appengine</span>.<span class="class">Channel</span>(<span class="variable">token</span>);
	<span class="keyword">var</span> <span class="variable">socket</span>	= <span class="variable">channel</span>.<span class="variable">open</span>();
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">create</span> <span class="variable">channel</span>&<span class="variable">quot</span>;, <span class="variable">token</span>)

	<span class="variable">socket</span>.<span class="variable">onopen</span>	= <span class="keyword">function</span>(){
		<span class="variable">self</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">channel</span> <span class="variable">connected</span> <span class="variable">resource</span>&<span class="variable">quot</span>;, <span class="variable">resource</span>)
		<span class="variable">self</span>.<span class="variable">connectedRsc</span>	= <span class="variable">resource</span>;
		
		<span class="comment">// send the clientId to the parent window</span>
		<span class="keyword">var</span> <span class="variable">data</span>	= {
			<span class="variable">type</span>	: &<span class="variable">quot</span>;<span class="variable">connected</span>&<span class="variable">quot</span>;,
			<span class="variable">data</span>	: {
				<span class="variable">clientId</span>	: <span class="variable">clientId</span>
			}
		}
		<span class="variable">self</span>.<span class="variable">parentWindowMessageSend</span>(<span class="variable">data</span>);
	}

	<span class="variable">socket</span>.<span class="variable">onclose</span>	= <span class="this">this</span>.<span class="variable">channelOnClose</span>.<span class="variable">bind</span>(<span class="this">this</span>);
	<span class="variable">socket</span>.<span class="variable">onerror</span>	= <span class="this">this</span>.<span class="variable">channelOnError</span>.<span class="variable">bind</span>(<span class="this">this</span>);
	<span class="variable">socket</span>.<span class="variable">onmessage</span>= <span class="this">this</span>.<span class="variable">channelOnMessage</span>.<span class="variable">bind</span>(<span class="this">this</span>);
}

<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelOnClose</span>	= <span class="keyword">function</span>(){
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">channel</span> <span class="variable">closed</span>&<span class="variable">quot</span>;)
}
<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelOnError</span>	= <span class="keyword">function</span>(<span class="variable">error</span>){
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">channel</span> <span class="variable">error</span>&<span class="variable">quot</span>;, <span class="variable">error</span>)
}
<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelOnMessage</span>	= <span class="keyword">function</span>(<span class="variable">message</span>, <span class="variable">opt_param</span>){
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">got</span> <span class="variable">message</span>&<span class="variable">quot</span>;, <span class="variable">message</span>, <span class="variable">opt_param</span>)
	<span class="this">this</span>.<span class="variable">parentWindowMessageSend</span>({
		<span class="variable">type</span>	: &<span class="variable">quot</span>;<span class="variable">data</span>&<span class="variable">quot</span>;,
		<span class="variable">data</span>	: <span class="variable">message</span>.<span class="variable">data</span>
	});	
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Send a query to the server to create a channel and get its identifying token</p>
</td>
<td class="code">
<pre><code><span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelConnect</span>	= <span class="keyword">function</span>(<span class="variable">resource</span>){
	<span class="keyword">var</span> <span class="variable">self</span>	= <span class="this">this</span>;
	<span class="keyword">var</span> <span class="variable">clientId</span>	= &<span class="variable">quot</span>;<span class="variable">ezChannel</span>&<span class="variable">quot</span>;+<span class="class">Math</span>.<span class="variable">floor</span>(<span class="class">Math</span>.<span class="variable">random</span>()*<span class="number integer">99999</span>);		
	<span class="keyword">var</span> <span class="variable">callUrl</span>	= &<span class="variable">quot</span>;/<span class="variable">createChannel</span>&<span class="variable">quot</span>;
				+ &<span class="variable">quot</span>;?<span class="variable">callback</span>=?&<span class="variable">quot</span>;
				+ &<span class="variable">quot</span>;&<span class="variable">amp</span>;<span class="variable">resource</span>=&<span class="variable">quot</span>;	+ <span class="variable">encodeURIComponent</span>(<span class="variable">resource</span>)
				+ &<span class="variable">quot</span>;&<span class="variable">amp</span>;<span class="variable">clientId</span>=&<span class="variable">quot</span>;	+ <span class="variable">encodeURIComponent</span>(<span class="variable">clientId</span>);
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">callUrl</span>&<span class="variable">quot</span>;, <span class="variable">callUrl</span>)
	<span class="variable">jQuery</span>.<span class="variable">getJSON</span>(<span class="variable">callUrl</span>, <span class="keyword">function</span>(<span class="variable">token</span>){
		<span class="variable">self</span>.<span class="variable">channelCtor</span>(<span class="variable">token</span>, <span class="variable">resource</span>, <span class="variable">clientId</span>);
	});
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Send message to AppEngine REST API</p>
</td>
<td class="code">
<pre><code><span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">channelSend</span>	= <span class="keyword">function</span>(<span class="variable">resource</span>, <span class="variable">message</span>){
	<span class="keyword">var</span> <span class="variable">self</span>	= <span class="this">this</span>;
	<span class="keyword">var</span> <span class="variable">callUrl</span>	= &<span class="variable">quot</span>;/<span class="variable">sendToResource</span>&<span class="variable">quot</span>;
				+ &<span class="variable">quot</span>;?<span class="variable">resource</span>=&<span class="variable">quot</span>;	+ <span class="variable">encodeURIComponent</span>(<span class="variable">resource</span>)
				+ &<span class="variable">quot</span>;&<span class="variable">amp</span>;<span class="variable">message</span>=&<span class="variable">quot</span>;	+ <span class="variable">encodeURIComponent</span>(<span class="variable">message</span>);
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">sendToResource</span> <span class="variable">callurl</span>&<span class="variable">quot</span>;, <span class="variable">callUrl</span>)
	<span class="variable">jQuery</span>.<span class="variable">post</span>(<span class="variable">callUrl</span>, <span class="keyword">function</span>(<span class="variable">result</span>){
		<span class="variable">self</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">message</span> <span class="variable">sent</span>&<span class="variable">quot</span>;)
	})
}


<span class="comment">//////////////////////////////////////////////////////////////////////////////////</span>
<span class="comment">//										//</span>
<span class="comment">//////////////////////////////////////////////////////////////////////////////////</span>

<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">parentWindowMessageCtor</span>	= <span class="keyword">function</span>(){
	<span class="keyword">var</span> <span class="variable">self</span>	= <span class="this">this</span>;
	<span class="variable">window</span>.<span class="variable">addEventListener</span>(&<span class="variable">quot</span>;<span class="variable">message</span>&<span class="variable">quot</span>;, <span class="keyword">function</span>(<span class="variable">event</span>){
		<span class="comment">// ignore the message received due to ChannelAPI itself</span>
		<span class="keyword">if</span>(<span class="variable">event</span>.<span class="variable">origin</span> == &<span class="variable">quot</span>;<span class="variable">http</span>:<span class="comment">//talkgadget.google.com&quot;)	return;</span>
		<span class="comment">// log the event</span>
		<span class="variable">self</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">recevied</span> <span class="variable">message</span> <span class="variable">from</span> <span class="variable">caller</span>&<span class="variable">quot</span>;, <span class="variable">event</span>)
		<span class="variable">self</span>.<span class="variable">parentWindowMessageRecv</span>(<span class="variable">event</span>);		
	}, <span class="variable">false</span>);		
}
<span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">parentWindowMessageDtor</span>	= <span class="keyword">function</span>(){
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>notify the parent window</p>
</td>
<td class="code">
<pre><code><span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">parentWindowMessageSend</span>	= <span class="keyword">function</span>(<span class="variable">data</span>){
	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">iframe</span> <span class="variable">notify</span>&<span class="variable">quot</span>;, <span class="variable">data</span>)
	<span class="variable">window</span>.<span class="variable">parent</span>.<span class="variable">postMessage</span>(<span class="class">JSON</span>.<span class="variable">stringify</span>(<span class="variable">data</span>), &<span class="variable">quot</span>;*&<span class="variable">quot</span>;);
}</code></pre>
</td>
</tr>
<tr class="code">
<td class="docs">
<p>Handle message from the parent window</p>
</td>
<td class="code">
<pre><code><span class="class">IframeMain</span>.<span class="variable">prototype</span>.<span class="variable">parentWindowMessageRecv</span>	= <span class="keyword">function</span>(<span class="variable">domEvent</span>){
	<span class="comment">// parse the event from the iframe</span>
	<span class="keyword">var</span> <span class="variable">eventFull</span>	= <span class="class">JSON</span>.<span class="variable">parse</span>(<span class="variable">domEvent</span>.<span class="variable">data</span>);
	<span class="keyword">var</span> <span class="variable">eventType</span>	= <span class="variable">eventFull</span>.<span class="variable">type</span>;
	<span class="keyword">var</span> <span class="variable">eventData</span>	= <span class="variable">eventFull</span>.<span class="variable">data</span>;

	<span class="this">this</span>.<span class="variable">log</span>(&<span class="variable">quot</span>;<span class="variable">eventType</span>&<span class="variable">quot</span>;, <span class="variable">eventType</span>, &<span class="variable">quot</span>;<span class="variable">eventData</span>&<span class="variable">quot</span>;, <span class="variable">eventData</span>)
	<span class="keyword">if</span>( <span class="variable">eventType</span> == &<span class="variable">quot</span>;<span class="variable">connect</span>&<span class="variable">quot</span>; ){
		<span class="this">this</span>.<span class="variable">channelConnect</span>(<span class="variable">eventData</span>.<span class="variable">resource</span>)
	}<span class="keyword">else</span> <span class="keyword">if</span>( <span class="variable">eventType</span> == &<span class="variable">quot</span>;<span class="variable">data</span>&<span class="variable">quot</span>; ){
		<span class="this">this</span>.<span class="variable">channelSend</span>(<span class="this">this</span>.<span class="variable">connectedRsc</span>, <span class="variable">eventData</span>.<span class="variable">message</span>);
	}
}



<span class="variable">jQuery</span>(<span class="keyword">function</span>(){
	<span class="comment">//IframeMain.log	= function(){ console.log.apply(console, arguments) }	</span>
	<span class="keyword">var</span> <span class="variable">iframeMain</span>	= <span class="keyword">new</span> <span class="class">IframeMain</span>();
});

</code></pre>
</td>
</tr>	</body>
</html></tbody></table>